// src/components/work/WorkSidebar.tsx
import { HomeOutlined, TeamOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import logo from '/1.png'; // 假设 logo.png 存放在 src/assets 文件夹中

const WorkSidebar: React.FC = () => {
  const [selectedKey, setSelectedKey] = useState('home');
  const navigate = useNavigate();

  const handleClick = (key: string) => {
    setSelectedKey(key);
    if (key === 'home') {
      navigate('/profile');
    } else if (key === 'members') {
      navigate('/members');
    }
  };

  return (
    <Menu
      mode="inline"
      style={{ height: '100%', borderRight: 0, backgroundColor: '#2F4056' }}
      selectedKeys={[selectedKey]}
      onClick={(e) => handleClick(e.key)}
    >
      <Menu.Item key="logo" disabled style={{ textAlign: 'center', cursor: 'default', padding: '16px 0' }}>
        <img src={logo} alt="Project Logo" style={{ maxWidth: '100%', maxHeight: '64px', borderRadius: '50%' }} />
      </Menu.Item>
      <Menu.Item key="home" icon={<HomeOutlined />} style={{ color: '#FFFFFF', fontSize: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        主页
      </Menu.Item>
      <Menu.Item key="members" icon={<TeamOutlined />} style={{ color: '#FFFFFF', fontSize: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        成员管理
      </Menu.Item>
    </Menu>
  );
};

export default WorkSidebar;
